<template>
  <el-form-item class="clear-left">
    <div class="layout-box-container">
      <div class="margin-top-div">
        <span class="next-input next-medium next-noborder">
          <input v-model.number="layoutBox.marginTop" placeholder="0" maxlength="3" height="100%"
            @keydown.up="KeydownUp(layoutBox.marginTop, 'marginTop')"
            @keydown.down="KeydownDown(layoutBox.marginTop, 'marginTop')" autocomplete="off" value="0" />
        </span>
      </div>
      <div class="margin-right-div">
        <span class="next-input next-medium next-noborder">
          <input v-model.number="layoutBox.marginRight" @keydown.up="KeydownUp(layoutBox.marginRight, 'marginRight')"
            @keydown.down="KeydownDown(layoutBox.marginRight, 'marginRight')" placeholder="0" maxlength="3"
            height="100%" autocomplete="off" value="0" />
        </span>
      </div>
      <div class="margin-bottom-div">
        <span class="help-txt">MARGIN</span>
        <span class="next-input next-medium next-noborder">
          <input v-model.number="layoutBox.marginBottom" @keydown.up="KeydownUp(layoutBox.marginBottom, 'marginBottom')"
            @keydown.down="KeydownDown(layoutBox.marginBottom, 'marginBottom')" placeholder="0" maxlength="3"
            height="100%" autocomplete="off" value="0" />
        </span>
      </div>
      <div class="margin-left-div">
        <span class="next-input next-medium next-noborder">
          <input v-model.number="layoutBox.marginLeft" @keydown.up="KeydownUp(layoutBox.marginLeft, 'marginLeft')"
            @keydown.down="KeydownDown(layoutBox.marginLeft, 'marginLeft')" placeholder="0" maxlength="3" height="100%"
            autocomplete="off" value="0" />
        </span>
      </div>
      <div class="padding-top-div">
        <span class="next-input next-medium next-noborder">
          <input v-model.number="layoutBox.paddingTop" @keydown.up="KeydownUp(layoutBox.paddingTop, 'paddingTop')"
            @keydown.down="KeydownDown(layoutBox.paddingTop, 'paddingTop')" placeholder="0" maxlength="3" height="100%"
            autocomplete="off" value="0" />
        </span>
      </div>
      <div class="padding-right-div">
        <span class="next-input next-medium next-noborder">
          <input v-model.number="layoutBox.paddingRight" @keydown.up="KeydownUp(layoutBox.paddingRight, 'paddingRight')"
            @keydown.down="KeydownDown(layoutBox.paddingRight, 'paddingRight')" placeholder="0" maxlength="3"
            height="100%" autocomplete="off" value="0" />
        </span>
      </div>
      <div class="padding-bottom-div">
        <span class="help-txt">PADDING</span>
        <span class="next-input next-medium next-noborder">
          <input v-model.number="layoutBox.paddingBottom"
            @keydown.up="KeydownUp(layoutBox.paddingBottom, 'paddingBottom')"
            @keydown.down="KeydownDown(layoutBox.paddingBottom, 'paddingBottom')" placeholder="0" maxlength="3"
            height="100%" autocomplete="off" value="0" />
        </span>
      </div>
      <div class="padding-left-div">
        <span class="next-input next-medium next-noborder">
          <input v-model.number="layoutBox.paddingLeft" @keydown.up="KeydownUp(layoutBox.paddingLeft, 'paddingLeft')"
            @keydown.down="KeydownDown(layoutBox.paddingLeft, 'paddingLeft')" placeholder="0" maxlength="3"
            height="100%" autocomplete="off" value="0" />
        </span>
      </div>
    </div>
  </el-form-item>
</template>

<script>
export default {
  name: "layoutBoxContainer",
  data() {
    return {
      layoutBox: {
        marginTop: 0,
        marginRight: 0,
        marginBottom: 0,
        marginLeft: 0,
        paddingTop: 0,
        paddingRight: 0,
        paddingBottom: 0,
        paddingLeft: 0
      }
    }
  },
  watch: {
    layoutBox: {
      deep: true,
      handler(val) {
        this.$emit('update:value', val)
      }
    }
  },
  methods: {
    KeydownUp(value, name) {
      if (value == undefined) {
        value = 1;
        this.$set(this.layoutBox, name, value)
        return
      }
      this.layoutBox[name] += 1
    },
    KeydownDown(value, name) {
      if (value == undefined) {
        value = 1;
        this.$set(this.layoutBox, name, value)
        return
      }
      this.layoutBox[name] -= 1
    }
  }
}
</script>

<style scoped></style>
